<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://www.ymate.net/ymweb_core" prefix="ymp" %>
<ymp:ui src="layout/base">
    <ymp:property name="title"><ymp:i18n key="page.login.title"/></ymp:property>
    <ymp:property name="page.css">
        <style type="text/css">
            body {
                background-color: #FFFFFF;
            }

            .nowrap-title {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                display: inline-block;
            }
        </style>
    </ymp:property>
    <ymp:layout>
        <div class="ui borderless stackable menu" style="width:100%;">
            <div class="ui container">
                <div class="header item">
                    <img src="images/logo.png" style="margin-right: 0.6em;">
                    <img class="ui small image" src="images/logo_text_small.png">
                </div>
                <a class="item">首页</a>
                <a class="item">文档</a>
                <a class="item">下载</a>
                <a class="item">论坛</a>
                <div class="item">
                    <div class="ui icon small input">
                        <input type="text" placeholder="搜索">
                        <i class="search link icon"></i>
                    </div>
                </div>
                <div class="right menu">
                    <a href="#" class="item" data-content="通知公告" data-variation="tiny">
                        <i class="large icons">
                            <i class="alarm outline icon"></i>
                            <i class="corner red circle icon"></i>
                        </i>
                    </a>
                    <a href="#" class="item" data-content="消息" data-variation="tiny">
                        <i class="large icons">
                            <i class="mail outline icon"></i>
                            <i class="corner red circle icon"></i>
                        </i>
                    </a>
                    <div class="ui dropdown link item">
                        <img class="ui avatar image" src="images/avatar_none.jpeg"><i class="dropdown icon"></i>
                        <div class="menu transition hidden">
                            <a href="#" class="item"><i class="user icon"></i>个人资料</a>
                            <a href="api/logout" class="item"><i class="sign out icon"></i>退出登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ymp:layout>
    <ymp:layout>
        <div class="ui container">
            <div class="ui grid stackable container">
                <div class="four wide column container">
                    <div class="ui vertical menu pointing fluid">
                        <a class="item">
                            个人资料
                        </a>
                        <a class="item">
                            修改密码
                        </a>
                        <a class="item">
                            修改头象
                        </a>
                        <a class="item active">
                            用户管理
                        </a>
                        <a class="item disabled">
                            更多...
                        </a>
                    </div>
                </div>
                <div class="twelve wide column container">
                    <div class="ui small header">用户管理</div>
                    <div class="ui divider"></div>
                    <div class="ui small pointing secondary blue menu">
                        <a class="item active" data-tab="first">全部</a>
                        <a class="item" data-tab="second">已锁定</a>
                        <a class="item" data-tab="third">黑名单</a>
                    </div>
                    <div class="ui tab active" data-tab="first">
                        <table class="ui celled table">
                            <thead>
                            <tr>
                                <th class="collapsing">
                                    <div class="ui fitted checkbox">
                                        <input type="checkbox">
                                        <label></label>
                                    </div>
                                </th>
                                <th>用户</th>
                                <th class="collapsing">性别</th>
                                <th class="collapsing">状态</th>
                                <th class="collapsing">注册时间</th>
                                <th class="collapsing">上次登录</th>
                                <th class="collapsing">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div class="ui fitted checkbox">
                                        <input type="checkbox">
                                        <label></label>
                                    </div>
                                </td>
                                <td>
                                    <h4 class="ui image header">
                                        <img src="images/avatar_none.jpeg" class="ui mini avatar image">
                                        <div class="content">
                                    <span class="nowrap-title" style="width: 140px;">
                                        有理想的鱼
                                    </span>
                                            <div class="sub header">
                                                <span class="nowrap-title" style="width: 140px;">suninformation</span>
                                            </div>
                                        </div>
                                    </h4>
                                </td>
                                <td class="collapsing">
                                    <span class="ui label">男</span>
                                </td>
                                <td class="collapsing">
                                    <div class="ui mini pointing left icon buttons">
                                <span class="ui button" title="邮箱已激活">
                                    <i class="mail icon"></i>
                                </span>
                                <span class="ui button" title="手机已激活">
                                    <i class="call icon"></i>
                                </span>
                                <span class="ui button" title="已锁定">
                                    <i class="lock icon"></i>
                                </span>
                                <span class="ui button" title="已黑名单">
                                    <i class="minus circle icon"></i>
                                </span>
                                    </div>
                                </td>
                                <td class="collapsing">
                                    <div class="ui list">
                                        <div class="item">9999-99-99 99:99:99</div>
                                            <%--<div class="item">2016-09-09 10:10:10</div>--%>
                                            <%--<div class="item"><span class="ui mini label">10:10:10</span></div>--%>
                                    </div>
                                </td>
                                <td class="collapsing">
                                    1天前
                                </td>
                                <td>
                                    <div class="ui mini basic icon buttons">
                                        <a href="profile/show_suninformation" class="ui button" title="详情"><i
                                                class="browser icon"></i></a>
                                        <a href="profile/edit_suninformation" class="ui button" title="编辑"><i
                                                class="edit icon"></i></a>
                                        <div class="ui button dropdown">
                                            <i class="ellipsis vertical icon"></i>
                                            <div class="menu transition hidden">
                                                <a class="item"><i class="unlock icon"></i>解除锁定</a>
                                                <a class="item"><i class="minus circle icon"></i>取消黑名单</a>
                                                <a href="#" class="item"><i class="refresh icon"></i>重置密码</a>
                                                <a href="#" class="item"><i class="wait icon"></i>操作记录</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th colspan="7">
                                    敬请期待...
                                </th>
                            </tr>
                            </tfoot>
                        </table>
                        <div class="ui center aligned container">
                            <div class="ui small pagination menu">
                                <a class="icon item">
                                    <i class="left chevron icon"></i>上一页
                                </a>
                                <a class="item active">1</a>
                                <a class="item">2</a>
                                <a class="item">3</a>
                                <a class="item">4</a>
                                <a class="item disabled">...</a>
                                <a class="item">99</a>
                                <a class="item">100</a>
                                <a class="icon item">
                                    下一页<i class="right chevron icon"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="ui tab" data-tab="second">
                    </div>
                    <div class="ui tab" data-tab="third">
                    </div>
                </div>
            </div>
        </div>
        <div class="ui container">
            <div class="ui vertical footer">
                <div class="ui inverted divider"></div>
                <div class="ui center aligned container">
                    <img src="images/logo_dark.png" class="ui centered mini image">
                    <div class="ui horizontal small divided link list">
                        <div class="item">&copy;2015-2016 yMate.Net</div>
                        <a class="item" href="http://git.oschina.net/suninformation/ymate-platform-v2" target="_blank">YMP
                            v2.0</a>
                        <a class="item" href="http://www.miibeian.gov.cn/" target="_blank">辽ICP备15013664号-1</a>
                    </div>
                    <div class="ui hidden fitted divider"></div>
                    <div class="ui horizontal small divided link list">
                        <a class="item" href="language/zh_CN">中文</a>
                        <a class="item" href="language/en_US">ENGLISH</a>
                    </div>
                    <div class="ui hidden fitted divider"></div>
                </div>
            </div>
        </div>
    </ymp:layout>
    <ymp:script>
        $(document).ready(function () {
            //
            $('.menu .ui.dropdown').dropdown({
                on: 'hover'
            });
            $('.ui.button.dropdown').dropdown({
                on: 'hover'
            });
            //
            $('.right.menu .item').popup();
            //
            $('.ui.accordion').accordion();
            //
            $('.ui.pointing.secondary.blue.menu .item').tab();
        });
    </ymp:script>
</ymp:ui>